<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>社区</title>
    <!-- //for-mobile-apps -->
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/stylesheets/homepage.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="/stylesheets/page04.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.3.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap-3.1.1.min.js"></script>
    <!--<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>-->
    <script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){
            window.scrollTo(0,1);
        }
    </script>
</head>
<body>
<div class="header ">
    <div class="container">
        <div class="header-left grid">
            <div class="grid__item color-1">
                <h1><a href="/"><i></i><span class="link link--kukuri" data-letters="爱宠驿站">爱宠驿站</span></a></h1>
            </div>
        </div>
        <div class="header-right">
            <%
            if(user){
            %>
            <a href="/users">
                <img src="/images/person.png" alt="">
                <%=user%>
            </a>
            <%
            }else{
            %>
            <a href="/login">
                <img src="/images/person.png" alt="">
                登录
            </a>
            <%
            }
            %>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="banner page-head">
    <div class="ban-top ">
        <div class="container">
            <div class="ban-top-con">
                <div class="top_nav_left">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse menu--shylock" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav menu__list">
                                    <li class="active menu__item "><a class="menu__link" href="/">首页 <span class="sr-only">(current)</span></a></li>
                                    <li class=" menu__item "><a class="menu__link" href="/about">关于我们</a>
                                    <li class=" menu__item"><a class="menu__link" href="/users/apply_foster">申请寄养家庭</a></li>
                                    <li class=" menu__item "><a class="menu__link" href="/users/foster">宠物寄养</a></li>
                                    <li class=" menu__item menu__item--current"><a class="menu__link" href="/article">社区</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>
                <div class="top_nav_right">
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<div class="article_top">
</div>
    <div class="page04_container">
        <div class="content_container">
            <div class="content_left">
                <div class="Picture_carousel">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="/images/bg1.jpg" alt="...">
                                <p>对于初养宠物犬的人来说，任何事情都是需要慎重的。相信不少初养宠物犬的饲主为狗狗的衣食</p>
                            </div>
                            <div class="item">
                                <img src="/images/bg2.jpg" alt="...">
                                <p>对于宠物，通常我们关注的都是些比较常见的问题，而对于一些不太关注或不常发生的问题，往</p>
                            </div>
                            <div class="item">
                                <img src="/images/bg4.jpg" alt="...">
                                <p>狗狗在很多饲主的严重犹如掌上明珠一般，在他们的眼中狗狗的意义已经超越了宠物一词。的确</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--用户信息-->
                <%
                if(user){
                %>
                <div class="user_info left_nav">
                    <div class="row" style="height: 40px">
                        <div class="col-xs-4 col-sm-12 col-md-12 col-lg-3">
                            <a href="#">
                                <img src="/images/icon.jpg" alt="" class="img_icon">
                            </a>
                        </div>
                        <div class="col-xs-5 col-sm-12 col-md-12 col-lg-5 nickname" ><p id="nickname"><a href="/users"><%=user%></a></p></div>
                        <div class="col-xs-3 col-sm-12 col-md-12 col-lg-4 nickname"><p><a href="/addart" id="im_out">[退出]</a></p></div>
                    </div>
                    <br>
                    <div class="row" style="height: 40px">
                        <div class="col-xs-4 col-sm-12 col-md-12 col-lg-4 nickname">
                            <a href="/users" style="font-size: 1.4rem">个人主页</a>
                        </div>
                        <div class="col-xs-4 col-sm-12 col-md-12 col-lg-4 nickname"> <a href="/users/mypet" style="font-size: 1.4rem">我的宠物</a></div>
                        <div class="col-xs-4 col-sm-12 col-md-12 col-lg-4 nickname">
                            <a href="/users/foster" style="font-size: 1.4rem">寄养</a>
                        </div>
                    </div>
                </div>
                <%
                }else{
                %>
                <div class="user_info left_nav" hidden>
                </div>
                <%
                }
                %>
            </div>
            <div class="gridbox gridmain">
                <div class="main">
                    <div class="editor_icon">
                        <a href="/editor_articles">
                            <img src="/images/editor.png" alt="">
                        </a>
                    </div>
                    <hr class="hr">
                    <%
                    if(books.length==0){
                    %>
                    <div>对不起，没有匹配结果</div>
                    <%
                    }else{
                    for(var i=0;i<=books.length-1;i++){
                    %>
                    <div class="col-xs-4 col-sm-12 col-md-12 col-lg-3">
                        <div class="author">
                        <a href="#">
                            <img src="/images/<%=books[i].pic%>" alt="" class="img_icon">
                            <%=books[i].username%>
                        </a>
                            <!--<a href="#"></a>-->
                        </div>
                        <div class="articles_date">
                           <%=books[i].date%>
                        </div>
                    </div>
                    <div class="author_article">
                        <a href="article/<%=books[i].artno%>">
                            <img src="/images/<%=books[i].icon%>" alt="" class="img_01" style="float: left">
                        </a>
                        <a href="article/<%=books[i].artno%>">
                            <h4 style="color: #dfc369;font-size: 1.8rem" class="simple"><%=books[i].title%></h4>
                        </a>
                        <p class="simple">
                            <%=books[i].content%>
                        </p>
                        <br>
                        <br>
                        <p>&nbsp;<a href="article/<%=books[i].artno%>">阅读全文</a></p>
                    </div>
                    <hr class="hr">
                    <%
                    }
                    }
                    %>
                </div>
            </div>

            <div class="gridbox gridright">
                <div class="right">
                    <h4>论坛精华</h4>
                    <br>
                    <%
                    for(var i=0;i<=books.length-1;i++){
                    %>
                    <p style="text-align: center;font-size: 1.8rem;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
                        <a href="article/<%=books[i].artno%>"><%=books[i].title%></a>
                    </p>
                    <p class="article-content"><%=books[i].content%></p> <a href="article/<%=books[i].artno%>">[详情]</a>
                    <hr class="hr">
                    <%
                    }
                    %>
                </div>
            </div>
        </div>
        <%include footer.html%>
        <%include back-top.html%>
    </div>
<script src="/javascripts/homepage.js"></script>

</body>
</html>